<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">客服管理</a>
        </li>
        <li class="active">客服列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">客服列表</h4>
            <div class="row">
                <div class="col-sm-6">
                    <a id="addService" href="#manager-modal" data-toggle="modal"
                       class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加客服
                    </a>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>微信二维码</th>
                        <th>微信名</th>
                        <th>客服名称</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>


    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 40%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">添加客服</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form" method="post"
                          enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="imageUrl"> 微信二维码：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="hidden" name="id" id="id" class="col-xs-9"/>
                                    <input type="file" name="imageUrl" id="imageUrl" class="col-xs-9"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="vxCode"> 微信名：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="vxCode" id="vxCode" class="col-xs-9"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="name"> 客服名称：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="name" id="name" class="col-xs-9"/>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <center>
                            <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                                    class="fa fa-undo"></i> 取消
                            </button>
                            <button class="btn btn-sm btn-primary"><i class="fa fa-check"></i> 保存</button>
                        </center>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="edit-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 40%">
            <div class="modal-content">
                <form id="edit-form" class="form-horizontal" role="form" method="post"
                      enctype="multipart/form-data">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                        </button>
                        <h5 class="modal-title">修改客服信息</h5>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="vxCode"> 微信名：</label>
                        <input type="text" name="idEdit" id="idEdit" hidden="hidden"/>
                        <div class="col-sm-9">
                            <div class="clearfix">
                                <input type="text" name="vxCodeEdit" id="vxCodeEdit" class="col-xs-9"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="nameEdit"> 客服名：</label>
                        <div class="col-sm-9">
                            <div class="clearfix">
                                <input type="text" name="nameEdit" id="nameEdit" class="col-xs-9"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                                class="fa fa-undo"></i> 取消
                        </button>
                        <button id="edit-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                                class="fa fa-check"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var company_table, adv_validator;
        $(function () {
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/serviceList'
                },
                columns: [
                    {
                        data: function (row) {
                            return "<a target='_blank' href='" + row.imageUrl + "'><img class='img-thumbnail' style='height: 70px;width: auto;' src='" + row.imageUrl + "'></a>";
                        }
                    }, {
                        data: 'vxCode',
                        defaultContent: ''
                    }, {
                        data: 'name',
                        defaultContent: ''
                    }, {
                        data: 'createTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            var btns = '&nbsp;&nbsp<a id="editAdv" href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 编辑</a>';
                            var del = '&nbsp;&nbsp;<a id="delAdv" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                            return btns + del;
                        }
                    }
                ]
            });

            //初始化表单校验
            adv_validator = $("#manager-form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    linkPage: {
                        required: true
                    },
                    imageUrl: {
                        required: true
                    }
                },
                messages: {
                    linkPage: {
                        required: "链接不能为空"
                    },
                    imageUrl: {
                        required: "图片不能为空"
                    }
                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });

            //点击编辑按钮，填充数据
            $("#company-table tbody").on("click", "#editAdv", function () {
                var row = company_table.row($(this).parents("tr")).data();
                $("#edit-form #idEdit").val(row.id);
                $("#edit-form #nameEdit").val(row.name);
                $("#edit-form #vxCodeEdit").val(row.vxCode);
                $("#edit-modal").modal("show");
            });

            /*//模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                adv_validator.resetForm();
                $("#manager-form .form-group").removeClass("has-error");
            });*/

            //编辑提交表单
            $("#edit-manager-btn").click(function () {
                if ($("#edit-form").valid()) {
                    $("#edit-form").ajaxSubmit({
                        type: 'post', // 提交方式 get/post
                        url: 'management/addService', // 需要提交的 url
                        dataType: "json",
                        resetForm: true,
                        success: function (data) { // data 保存提交后返回的数据，一般为 json 数据
                            // 此处可对 data 作相关处理
                            $("#edit-modal").modal("hide");
                            company_table.ajax.reload();
                        }
                        //$(this).resetForm(); // 提交后重置表单
                    });
                }
                return false;
            });


            $('#company-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#company-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });


            //点击删除按钮，删除广告
            $("#company-table tbody").on("click", "#delAdv", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个客服信息？", function (f) {
                    if (f) {
                        $.post("management/deleteService/" + id, function () {
                            company_table.ajax.reload();
                        });
                    }
                });
            });

            $('#imageUrl').ace_file_input({
                no_file: 'No File ...',
                btn_choose: 'Choose',
                btn_change: 'Change',
                droppable: false,
                onchange: null,
                thumbnail: false,//| true | large
                whitelist: 'gif|png|jpg|jpeg'
                //blacklist:'exe|php'

            });

            $("#manager-form").on("submit", function () {
                var image = $('image').val();
                $(this).ajaxSubmit({
                    type: 'post', // 提交方式 get/post
                    url: 'management/addService', // 需要提交的 url
                    dataType: "json",
                    /*data: {
                        'image': image
                    },*/
                    success: function (data) { // data 保存提交后返回的数据，一般为 json 数据
                        // 此处可对 data 作相关处理
                        $("#manager-modal").modal("hide");
                        company_table.ajax.reload();
                    }
                    //$(this).resetForm(); // 提交后重置表单
                });
                return false;
            });


        });
    </script>
</div>